{% extends "layout.html" %}

{% block title %}系统状态 - 股票实时AI分析系统{% endblock %}

{% block content %}
<h1 class="mb-4">系统状态</h1>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">健康状态</div>
            <div class="card-body">
                <h5
                    class="card-title fw-bold 
                    {% if health.status == 'healthy' %}text-success{% elif health.status == 'degraded' %}text-warning{% else %}text-danger{% endif %}">
                    {{ health.status|capitalize }}
                </h5>
                <ul class="list-group mt-3">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        数据库
                        <span
                            class="badge {% if health.components.database == 'healthy' %}bg-success{% else %}bg-danger{% endif %}">
                            {{ health.components.database|capitalize }}
                        </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        数据收集器
                        <span
                            class="badge {% if health.components.data_collector == 'healthy' %}bg-success{% else %}bg-danger{% endif %}">
                            {{ health.components.data_collector|capitalize }}
                        </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        AI模型
                        <span
                            class="badge {% if health.components.ai_model == 'healthy' %}bg-success{% else %}bg-danger{% endif %}">
                            {{ health.components.ai_model|capitalize }}
                        </span>
                    </li>
                </ul>
                <p class="card-text mt-3">
                    <small class="text-muted">最后检查时间: {{ health.last_check }}</small>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">系统信息</div>
            <div class="card-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <th scope="row">运行时间</th>
                            <td>{{ uptime }}</td>
                        </tr>
                        <tr>
                            <th scope="row">监控股票数</th>
                            <td id="stock-count">加载中...</td>
                        </tr>
                        <tr>
                            <th scope="row">系统版本</th>
                            <td>1.0.0</td>
                        </tr>
                        <tr>
                            <th scope="row">定时任务</th>
                            <td>每个交易日15:30执行分析</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">性能指标</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>操作</th>
                        <th>股票代码</th>
                        <th>耗时</th>
                        <th>时间戳</th>
                    </tr>
                </thead>
                <tbody>
                    {% if performance %}
                    {% for item in performance %}
                    <tr>
                        <td>{{ item.operation }}</td>
                        <td>{{ item.stock_code }}</td>
                        <td>{{ item.duration }}</td>
                        <td>{{ item.timestamp }}</td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center">暂无性能指标数据</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get stock count
        fetch('/api/stocks')
            .then(response => response.json())
            .then(data => {
                document.getElementById('stock-count').textContent = data.length;
            })
            .catch(error => {
                document.getElementById('stock-count').textContent = 'Error loading';
            });

        // Auto refresh every 30 seconds
        setInterval(function () {
            fetch('/api/health')
                .then(response => response.json())
                .then(data => {
                    const status = document.querySelector('.card-title.fw-bold');
                    status.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
                    status.className = 'card-title fw-bold';

                    if (data.status === 'healthy') {
                        status.classList.add('text-success');
                    } else if (data.status === 'degraded') {
                        status.classList.add('text-warning');
                    } else {
                        status.classList.add('text-danger');
                    }

                    // Update component statuses
                    const badges = document.querySelectorAll('.list-group-item .badge');
                    badges[0].textContent = data.components.database.charAt(0).toUpperCase() + data.components.database.slice(1);
                    badges[0].className = 'badge';
                    badges[0].classList.add(data.components.database === 'healthy' ? 'bg-success' : 'bg-danger');

                    badges[1].textContent = data.components.data_collector.charAt(0).toUpperCase() + data.components.data_collector.slice(1);
                    badges[1].className = 'badge';
                    badges[1].classList.add(data.components.data_collector === 'healthy' ? 'bg-success' : 'bg-danger');

                    badges[2].textContent = data.components.ai_model.charAt(0).toUpperCase() + data.components.ai_model.slice(1);
                    badges[2].className = 'badge';
                    badges[2].classList.add(data.components.ai_model === 'healthy' ? 'bg-success' : 'bg-danger');

                    // Update last check time
                    document.querySelector('.text-muted').textContent = 'Last checked: ' + data.last_check;
                })
                .catch(error => {
                    console.error('Error refreshing health status:', error);
                });
        }, 30000);
    });
</script>
{% endblock %}